<template>
    <div class="main_box" style="padding:10px">
        <div class="add_wrap">
            <div class="tit">
                <h2>基础信息</h2>
                <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
            </div>
            <el-form :model="dataForm" ref="dataForm">
                <el-row>
                    <el-transfer v-model="dataForm.businessIds" filterable :data="businessList" :props="{ key: 'id', label: 'name' }"
                        :titles="['全部商户', '该部门拥有的商户']"></el-transfer>
                </el-row>
                <el-row style="text-align:center;padding-right: 100px;">
                    <!-- <el-form-item> -->
                        <el-button plain type="primary" @click="sureClick">保 存</el-button>
                        <el-button @click="returnList">取 消</el-button>
                    <!-- </el-form-item> -->
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
import BusinessApi from "@/api/business/business";
import DepartApi from "@/api/system/depart";
export default {
    data() {
        return {
            dataForm: {
                businessIds: [],
                departId: "",
            },
            businessList: [],
        }
    },
    components: {
    },
    mounted() {
        // this.getData();
        this.dataForm.departId = this.$route.query.id
        this.getBusinessList()
    },
    methods: {
        // 获取商户列表
        getBusinessList() {
            const { dataForm } = this
            BusinessApi.listIdNameVo({ sysDepartId: dataForm.departId }).then(res => {
                const { data } = res
                this.businessList = data
                dataForm.businessIds = data.filter(item => item.state).map(item => item.id)
            })
        },
        sureClick() {
            this.$confirm("确定保存吗？", "提示", {}).then(() => {
                const { departId, businessIds } = this.dataForm
                const params = {
                    id: departId,
                    ids: businessIds
                }
                DepartApi.setDepartBusiness(params)
                    .then(res => {
                        this.$Utils.notifySuccess()
                        this.returnList()
                    })
            })

        },
        returnList() {
            this.$store.dispatch('delView', this.$route);
            this.$router.back();
        }
    }
}
</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>
<style lang="scss" scoped>
.el-transfer {
    &::v-deep .el-transfer-panel {
        width:350px;
        // vertical-align: top;
        .el-transfer-panel__body {
            height: auto;

            .el-transfer-panel__list,.el-transfer-panel__empty {
                height: 500px !important;
            }
        }
    }


}
</style>
